<template>
  <div class="agent">
    <div class="agent_info">
      <div>
        <label for="agent_name">代理名称：</label>
        <input id="agent_name" type="text" v-model="agentName" placeholder="代理名称">
      </div>
      <div>
        <label for="agent_phone">手&ensp;机&ensp;号：</label>
        <input id="agent_phone" type="number" v-model="agentPhone" placeholder="手机号">
      </div>
      <div>
        <label for="agent_pwd">登录密码：</label>
        <input id="agent_pwd" type="text" v-model="agentPwd" placeholder="6-16位字母数字符号组合">
      </div>
      <div>
        <label for="agent_wechat">微&ensp;信&ensp;号：</label>
        <input id="agent_wechat" type="text" v-model="agentWechat" placeholder="微信号">
      </div>
      <div>
        <label for="gamelist">所属游戏：</label>
        <select id="gamelist" v-model="selectGame">
          <option v-bind:value="{id:item.id}" v-for="item in gameList">{{item.name}}</option>
        </select>
      </div>
      <div>
        <label for="citylist">所属城市：</label>
        <select id="citylist" v-model="selectCity">
          <option v-bind:value="{id:item.id}" v-for="item in cities">{{item.name}}</option>
        </select>
      </div>
      <div>
        <label for="countlist">所属区县：</label>
        <select v-if="!otherPlace" id="countlist" v-model="selectCounty">
          <option v-bind:value="{id:item.id}" v-for="item in counties">{{item.name}}</option>
        </select>
        <input v-if="otherPlace" type="text" v-model="other">
      </div>
    </div>
    <p class="create_tips">备注：所有加赠的房卡均由官方赠出，不扣除代理商房卡</p>
    <agent-button :disabled="btnEnable" class="create_btn" @btnClick="createClick">创建</agent-button>
  </div>
</template>

<script>
import DropDown from "../../components/common/DropDown.vue";
import AgentButton from "../../components/common/AgentButton.vue";
export default {
  data() {
    return {
      gameList: [],
      cities: [],
      counties: [],
      agentName: "",
      agentPhone: "",
      agentPwd: "",
      agentWechat: "",
      other: "",
      otherPlace: false,
      selectCity: { id: "1" },
      selectGame: { id: "1" }
    };
  },
  components: {
    DropDown,
    AgentButton
  },
  computed: {
    btnEnable() {
      if (
        this.agentName &&
        this.agentPhone &&
        this.agentPwd &&
        this.agentWechat
      ) {
        return false;
      }
      return true;
    },
    selectCounty: {
      get() {
        return {
          id: this.counties[0] && this.counties[0].id
        };
      },
      set() {}
    }
  },
  created() {
    this.apiService.user.getgamelist().then(res => {
      this.gameList = res.data.gamelist;
    });
    this.apiService.user.getregion().then(res => {
      this.cities = res.data.regionlist;
    });
    this.fetchCounties(1);
  },
  watch: {
    selectCity() {
      this.counties = [];
      this.otherPlace = false;
      if (this.selectCity.id == 14) {
        this.otherPlace = true;
      }
      this.fetchCounties(this.selectCity.id);
    },
    selectCounty() {
      this.area = "";
    }
  },
  methods: {
    fetchCounties(id) {
      return this.apiService.user
        .getsecondregion({
          parentid: id
        })
        .then(res => {
          this.counties = res.data.regionlist;
        });
    },
    createClick() {
      if (this.other) {
        this.selectCounty.id = "";
      }
      this.apiService.agent
        .addagent({
          nickname: this.agentName,
          wxnumber: this.agentWechat,
          mobile: this.agentPhone,
          regionid: this.selectCity.id,
          gameid: this.selectGame.id,
          password: this.agentPwd,
          county: this.selectCounty.id,
          area: this.other
        })
        .then(res => {
          this.$vux.toast.text("创建代理成功");
        });
    }
  }
};
</script>

<style scoped>
.agent {
  text-align: center;
  font-size: 0.32rem;
  height: 100%;
}
.agent_info {
  background-color: #fff;
  padding: 0.4rem 0;
  text-align: center;
}
.agent_info div {
  margin: 0.25rem 0;
}
.agent_info div label,
.agent_info div input,
.agent_info div select {
  font-size: 0.32rem;
}
.agent_info div label {
  color: #555;
}
.agent_info div input,
.agent_info div select {
  border: 1px solid #d7d7d7;
  border-radius: 0.1rem;
  font-size: 0.32rem;
  height: 0.56rem;
  width: 3.87rem;
}
.create_tips {
  color: #cc422e;
  padding: 0.46rem 0;
}
.create_btn {
  margin-top: 0.16rem;
}
#drop-down {
  margin: 0;
}
</style>
